
<template>
  <!--    -->
  <button @click="print">模板方式打印</button>
  <lodop ref="lodopIframe2ref"></lodop>

  <div style="display: flex">
    <oldpage></oldpage>

    <div ref="myTemplateJD" id="templateJD222" style="border: 1px solid black;width: 285px;font-size: 12px;box-sizing: border-box;">
      <!-- row1     -->
      <div style="display: flex;height: 34px;box-sizing: border-box;">
        <div style="flex: 1 1 181px;display: flex;flex-wrap:wrap;justify-content: center;">
          <div>950616 www.jdl.com</div>
          <div>{{moment().format('yyyy-MM-DD HH:mm:ss')}}</div>
        </div>
        <div style="font-size: 24px;background-color: #000;color: white;flex: 0 1 94px;display: flex;justify-content: center;align-items: center">{{item["产品"]}}</div>
      </div>
      <!--row2-->
      <div style="height: 50px;border-bottom: 1px solid black;box-sizing: border-box;">
<!--           {{item["快递单号"]}}-->
      </div>
      <!--row3-->
      <div style="display: flex;text-align: center;border-bottom: 1px solid black;height: 50px;box-sizing: border-box;">
        <div style="flex: 0 1 142px;border-right: 1px solid black;">
          <div>{{item['始发分拣地']}}</div>
          <div style="font-weight: bold;font-size: 20px">{{item["始发滑道笼车"]}}</div>
        </div>
        <div style="flex: 0 1 142px;">
          <div class="b2">{{item["目的分拣地"]}}</div>
          <div style="font-weight: bold;font-size: 20px">{{item["目的分拣滑道笼车号"]}}</div>
        </div>
      </div>
      <!--row4-->
      <div style="display: flex;border-bottom: 1px solid black;height: 33px;box-sizing: border-box;">
        <div style="flex: 1 1 auto;border-right: 1px solid black;">
          <div>{{item["集包地"]}}</div>
          <div style="text-align: center;">{{item["站点名称"]}} {{item["路区号"]}}</div>
        </div>
        <div style="flex: 0 1 32px;font-weight: bolder;font-size: 24px;padding: 0 5px;">{{item["路区号"]}}</div>
      </div>
      <!--row5-->
      <div style="display: flex;border-bottom: 1px solid black;padding: 5px 15px; height: 29px;box-sizing: border-box;">
        <div style="flex: 0 1 24px;">收</div>
        <div style="flex: 1 1 auto;text-align: center;">{{item["收件人名称"]}} {{item["收件人电话"]}}</div>
      </div>
      <!--row6-->
      <div style="text-align: center;font-weight: bolder;border-bottom: 1px solid black;padding: 5px 15px;height: 52px;box-sizing: border-box;">
        {{item["收货人地址"]}}
      </div>
      <!--row7-->
      <div style="display: flex;border-bottom: 1px solid black;padding: 5px 15px;height: 29px;box-sizing: border-box;">
        <div style="flex: 0 1 24px;">寄</div>
        <div style="flex: 1 1 auto;text-align: center;">{{item["寄件人信息"]}}</div>
      </div>
      <!--row8-->
      <div style="height:70px;border-bottom: 1px solid black;">
<!--        <div style="font-weight: bolder;">{{item["快递单号二"]}}</div>-->
      </div>
      <!--row9-->
      <div style="border-bottom: 1px solid black;padding: 5px 15px;">
        订单号<span style="margin-left: 10px;font-size: 16px;">{{item["快递单号二"]}}</span>
      </div>

      <div style="text-align: right;font-weight: bolder;border-bottom: 1px solid black;padding: 5px 15px;">
        已验视
      </div>
      <div style="font-weight: bolder;padding: 0 15px;">
        <div class="b1">总件数 <span style="margin-left: 40px">{{item["订单总数量"]}}</span></div>
        <div style="text-align: center;font-size: 20px">{{item["订单波次序号"]}}</div>
        <div style="text-align: center;font-size: 20px">{{item["物料信息"]}}</div>
      </div>
    </div>
  </div>

</template>
<style scoped>
#templateJD222{
  position: absolute;left: 314px;top: 113px;
}
</style>

<script setup>
import oldpage from './JD老模板.vue';
import moment from 'moment';

import { drawQRCode2, drawBarcode2 } from '../qrcode.js'
import {ref} from 'vue'

const lodopIframe2ref = ref(null)
const myTemplateJD = ref(null)
const item = ref({
    "订单波次序号": "1/50012",
    "订单总数量": "1",
    "收货人地址": "北京市北京市丰台区亚林西居住区8号院五号楼二单元1904",
    "寄件人地址": " ",
    "快递单号": "JDVB22848094030-1-1-",
    "收件人名称": "高**",
    "快递单号二": "JDVB22848094030",
    "出库单号": "J000172344",
    "目的分拣滑道笼车号": "目的分拣滑道笼车号",
    "站点名称": "◆北京开阳里营业部",
    "寄件人信息": "沃尔玛香港有限公司 400-633-6868",
    "二维码": "https://mp.weixin.qq.com/a/~bdyFWnK5nG7Ly5w-xXbAYg~~",
    "集包地": "【集】杭州东洲",
    "目的分拣地": "目的分拣地",
    "产品": "1",
    "路区号": "024",
    "始发滑道笼车": "始发滑道笼车",
    "物料信息": "2756/1 ",
    "收件人电话": "134****8718",
    "始发分拣地": "始发分拣地"
})

const print = ()=>{
  lodopIframe2ref.value.demoPrint(callback, 1)
}

const callback = (LODOP)=>{
  console.log(myTemplateJD.value);
  // let html = myTemplateJD.value.outerHTML
  let html = `
    <div ref="myTemplateJD" id="templateJD222" style="border: 1px solid black;width: 285px;font-size: 12px;box-sizing: border-box;">
      <div style="display: flex;height: 34px;box-sizing: border-box;">
        <div style="flex: 1 1 181px;display: flex;flex-wrap:wrap;justify-content: center;">
          <div>950616 www.jdl.com</div>
          <div>${moment().format('yyyy-MM-DD HH:mm:ss')}</div>
        </div>
        <div style="font-size: 24px;background-color: #000;color: white;flex: 0 1 94px;display: flex;justify-content: center;align-items: center">{{item["产品"]}}</div>
      </div>
      <div style="height: 50px;border-bottom: 1px solid black;box-sizing: border-box;">
      </div>
      <div style="display: flex;text-align: center;border-bottom: 1px solid black;height: 50px;box-sizing: border-box;">
        <div style="flex: 0 1 142px;border-right: 1px solid black;">
          <div>${item['始发分拣地']}</div>
          <div style="font-weight: bold;font-size: 20px">${item["始发滑道笼车"]}}</div>
        </div>
        <div style="flex: 0 1 142px;">
          <div class="b2">${item["目的分拣地"]}}</div>
          <div style="font-weight: bold;font-size: 20px">${item["目的分拣滑道笼车号"]}}</div>
        </div>
      </div>
      <div style="display: flex;border-bottom: 1px solid black;height: 33px;box-sizing: border-box;">
        <div style="flex: 1 1 auto;border-right: 1px solid black;">
          <div>${item["集包地"]}}</div>
          <div style="text-align: center;">${item["站点名称"]}} ${item["路区号"]}}</div>
        </div>
        <div style="flex: 0 1 32px;font-weight: bolder;font-size: 24px;padding: 0 5px;">${item["路区号"]}}</div>
      </div>
      <div style="display: flex;border-bottom: 1px solid black;padding: 5px 15px; height: 29px;box-sizing: border-box;">
        <div style="flex: 0 1 24px;">收</div>
        <div style="flex: 1 1 auto;text-align: center;">${item["收件人名称"]}} ${item["收件人电话"]}}</div>
      </div>
      <div style="text-align: center;font-weight: bolder;border-bottom: 1px solid black;padding: 5px 15px;height: 52px;box-sizing: border-box;">
        ${item["收货人地址"]}}
      </div>
      <div style="display: flex;border-bottom: 1px solid black;padding: 5px 15px;height: 29px;box-sizing: border-box;">
        <div style="flex: 0 1 24px;">寄</div>
        <div style="flex: 1 1 auto;text-align: center;">${item["寄件人信息"]}}</div>
      </div>
      <div style="height:70px;border-bottom: 1px solid black;">
      </div>
      <div style="border-bottom: 1px solid black;padding: 5px 15px;">
        订单号<span style="margin-left: 10px;font-size: 16px;">${item["快递单号二"]}}</span>
      </div>

      <div style="text-align: right;font-weight: bolder;border-bottom: 1px solid black;padding: 5px 15px;">
        已验视
      </div>
      <div style="font-weight: bolder;padding: 0 15px;">
        <div class="b1">总件数 <span style="margin-left: 40px">${item["订单总数量"]}}</span></div>
        <div style="text-align: center;font-size: 20px">${item["订单波次序号"]}}</div>
        <div style="text-align: center;font-size: 20px">${item["物料信息"]}}</div>
      </div>
    </div>
  </div>
  `
  LODOP.SET_PRINT_PAGESIZE(1, 760, 1300, '')  //纸张设置为76mm*130mm
  LODOP.ADD_PRINT_BARCODE(45, 20,'65mm', '10mm', "128A", item.value['快递单号'])
  LODOP.ADD_PRINT_BARCODE('76mm', '15mm','50mm', '16mm', "128Auto", item.value['快递单号二'])
  LODOP.ADD_PRINT_HTM(2,2, 300,600,html);
  LODOP.NEWPAGEA();
}
</script>